<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 格式化工具</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
</head>

<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item active" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.0
            </div>
        </div>
        <div class="main-content">
            <div class="json-container">
                <div class="json-left">
                    <div class="json-header">
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <h3>输入 JSON</h3>
                            <button class="secondary" onclick="clearJSON()">清空</button>
                        </div>
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <label style="font-size: 13px; color: var(--text-secondary);">根对象名:</label>
                            <input type="text" id="root-name" value="data"
                                style="width: 100px; padding: 6px 10px; font-size: 13px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color);">
                        </div>
                    </div>
                    <div class="message" id="json-message"></div>
                    <div class="json-content">
                        <textarea class="json-input" id="json-input" placeholder='粘贴 JSON 数据...'
                            onpaste="handlePaste()"></textarea>
                    </div>
                </div>
                <div class="json-right">
                    <div class="json-header">
                        <h3>格式化结果</h3>
                        <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                            <button onclick="toggleSearch()" title="搜索">🔍</button>
                            <button onclick="toggleFullscreen()" title="全屏">⛶</button>
                            <button onclick="collapseAll()" title="折叠">−</button>
                            <button onclick="expandAll()" title="展开">+</button>
                            <button onclick="sortJSON()" title="排序">↕</button>
                            <button onclick="compressJSONResult()" title="压缩">≡</button>
                            <button onclick="copyJSONTree()" title="复制">📋</button>
                        </div>
                    </div>
                    <div class="json-search" id="json-search-box" style="display: none;">
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <input type="text" id="json-search" placeholder="搜索键或值..." oninput="searchJSON()"
                                style="flex: 1;">
                            <span id="search-count" style="font-size: 12px; color: var(--text-secondary); white-space: nowrap;"></span>
                            <button onclick="searchPrev()" style="padding: 6px 12px;">↑</button>
                            <button onclick="searchNext()" style="padding: 6px 12px;">↓</button>
                        </div>
                    </div>
                    <div class="json-content">
                        <div class="json-tree" id="json-tree"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="theme-toggle.js"></script>
    <script src="json-formatter.js"></script>
</body>

</html>